<template>
  <view class="page">
    <view class="header">
      <view class="custom-header" :style="{ height: headerHeight + 'px', paddingTop: titleHeight + 'px' }">
        <text v-if="!userStore.token" class="title" @click="handleToLogin">你好，请先登录</text>
        <text v-if="userStore.token" class="title">你好，{{ userStore.userInfo.name }}</text>
        <view><img src="../../static/logo.png" alt="logo" class="logo" /></view>
        <view class="box">
          <view class="topBox">
            <view class="boxLeft" @click="handleToSearch">
              <view class="boxText">
                <view class="boxTitle">查找项目</view>
                <view class="boxSubTitle">
                  <view>进入查找</view>
                  <view class="icon">
                    <up-icon name="play-right-fill" size="12" color="#4084f9"></up-icon>
                  </view>
                </view>
              </view>
              <view class="boxIcon">
                <up-icon name="search" size="45"></up-icon>
              </view>
            </view>
            <view class="boxRight" @click="handleToMyProject">
              <view class="boxText">
                <view class="boxTitle">我的项目</view>
                <view class="boxSubTitle">
                  <view>查看详情</view>
                  <up-icon name="play-right-fill" size="12" color="#4084f9"></up-icon>
                </view>
              </view>
              <view class="boxIcon">
                <up-icon name="account" size="45"></up-icon>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 页面内容 -->
    <view class="content" :style="{ marginTop: headerHeight + 'px' }">
      <view class="allSignUp">
        <view class="signHeader">
          <view class="tagDiv"></view>
          <p>最新项目</p>
        </view>
        <view class="signList">
          <view class="signCardContainer">
            <up-empty
              :show="recentStartProject.length == 0"
              text="暂时没有可以报名的项目"
              class="empty"
              margin-top="40px"
              icon-color="#e9eef5"
              text-color="#d8e8f9"
              icon-size="120"
            >
            </up-empty>
            <ActiveCard v-for="(item, index) in recentStartProject" :key="index" :project="item" />
          </view>
        </view>
      </view>
      <view class="nowGoing">
        <view class="nowHeader">
          <view class="_tagDiv"></view>
          <p>即将结束</p></view
        >
        <view class="nowList">
          <up-empty
            :show="recentOverProject.length == 0"
            text="暂时没有即将结束的项目"
            class="empty"
            mode="data"
            margin-top="20px"
            icon-color="#e6e6e6"
            text-color="#6fa0fc"
            icon-size="120"
          >
          </up-empty>
          <StuActiveCard v-for="(item, index) in recentOverProject" :key="index" :project="item" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { useRouter } from 'uniapp-router-next'
import StuActiveCard from './components/StuActiveCard.vue'
import ActiveCard from '../../components/ActiveCard.vue'
import { ref, computed, onMounted } from 'vue'
import { useUserStore } from '@/stores/index'
import { getProject } from '@/api/home'
import { Project } from '@/types/home'
const userStore = useUserStore()

const router = useRouter()
//状态栏高度
const statusBarHeight = ref(0)
//胶囊按钮高度
const capsuleHeight = ref(0)
//胶囊按钮顶部距离
const capsuleTop = ref(0)
//标题的高度
const titleHeight = ref(0)
//计算头部高度
const headerHeight = computed(() => {
  // 胶囊按钮底部高度,胶囊到头部的高度+胶囊高度+额外给高度放下俩个块
  return capsuleTop.value + capsuleHeight.value + 195
})

// 在组件挂载时获取系统信息

const systemInfo = uni.getSystemInfoSync()
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
capsuleHeight.value = menuButtonInfo.height
capsuleTop.value = menuButtonInfo.top
titleHeight.value = capsuleTop.value + 5
statusBarHeight.value = systemInfo.statusBarHeight ?? 44

const handleToLogin = () => {
  router.navigateTo({
    path: '/pages/loginPage/index',
  })
}

const handleToSearch = () => {
  router.navigateTo({
    path: '/pages/searchPage/index',
  })
}

const handleToMyProject = () => {
  if (!userStore.token) {
    uni.showModal({
      title: '请先登录',
      content: '将跳转到登录页',
      showCancel: true,
      success: ({ confirm }) => {
        if (confirm) {
          router.navigateTo({
            path: '/pages/loginPage/index',
          })
        }
      },
    })
  } else {
    router.navigateTo({
      path: '/pages/myProjectPage/index',
    })
  }
}

const recentOverProject = ref<Project[]>([])
const recentStartProject = ref<Project[]>([])

onMounted(() => {
  //  先获取全部的项目
  const currentTime = new Date().getTime()

  // 计算七天前的时间戳
  const sevenDaysAgo = currentTime - 7 * 24 * 60 * 60 * 1000

  getProject({}).then((res) => {
    // 筛选最近七天结束的项目
    const recentOverProjects = res.data.filter((project) => {
      // 获取项目的 over_time 并转换为时间戳
      const projectOverTime = new Date(project.over_time).getTime()

      // 判断是否在最近七天内
      if (projectOverTime > sevenDaysAgo && projectOverTime < currentTime) {
        return project
      }
    })

    // 筛选最近七天发布的项目
    const recentStartProjects = res.data.filter((project) => {
      // 获取项目的 over_time 并转换为时间戳
      const projectStartTime = new Date(project.start_time).getTime()

      // 判断是否在最近七天内
      if (projectStartTime > sevenDaysAgo && projectStartTime < currentTime) {
        return project
      }
    })
    recentStartProject.value = recentStartProjects
    recentOverProject.value = recentOverProjects
  })
})
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #eff0f4;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  position: fixed;
  width: 100%;
  z-index: 1;
}

.custom-header {
  width: 100%;
  background: linear-gradient(to bottom, #4590f1, #eff0f4);
  display: flex;
  justify-content: left;
  flex-direction: column;
  box-sizing: border-box;
}

.title {
  color: #fff;
  font-size: 16px;
  padding-left: 12px;
}

.logo {
  width: 200px;
  height: 45.2px;
  margin-left: 12px;
  margin-top: 15px;
}

.box {
  display: flex;
  justify-content: center;
}

.topBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95%;
  height: 110px;
  background: linear-gradient(to bottom, #dce6fa, #ffffff);
  border-radius: 8px;
  margin: 10px;
}

.boxLeft {
  width: 46%;
  height: 65%;
  background: linear-gradient(to bottom, #d2e4fc, #f5f8fd);
  border-radius: 8px;
  margin-right: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxRight {
  width: 46%;
  height: 65%;
  background: linear-gradient(to bottom, #d2e4fc, #f5f8fd);
  border-radius: 8px;
  margin-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxText {
  width: 90px;
  letter-spacing: 1.5px;
}

.boxTitle {
  font-size: 16px;
  color: black;
  font-weight: 550;
}

.boxSubTitle {
  font-size: 14px;
  color: #90b2e6;
  display: flex;
  align-items: baseline;
}

.icon {
  display: flex;
  align-items: center;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 最新项目 */
.allSignUp {
  /* min-height: 290px; */
  height: 280px;
  background: linear-gradient(to bottom, #4484f8, #a0c2ff);
  width: 95%;
  border-radius: 12px;
}

.signHeader {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 15px;
  margin-top: 20px;
  color: #ffffff;
  letter-spacing: 1px;
}

.tagDiv {
  width: 5px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 3px;
  margin-right: 10px;
}

.signList {
  margin-top: 10px;
  height: 220px;
  max-height: 230px;
  overflow: auto;
}

.signCardContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.nowGoing {
  min-height: 240px;
  background-color: #ffffff;
  width: 95%;
  border-radius: 12px;
  margin-top: 18px;
  margin-bottom: 18px;
}

.nowHeader {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 15px;
  margin-top: 20px;
  color: #74a5ef;
  letter-spacing: 1px;
}

._tagDiv {
  width: 5px;
  height: 20px;
  background-color: #6a97e6;
  border-radius: 3px;
  margin-right: 10px;
}

.nowList {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-height: 200px;
}
</style>
